<!doctype html>
<html class="os_winXp"><!--os_winXp,os_mac,os_vista,os_win7-->
<head>
	<meta charset="utf-8" />
	<title>QAMS</title>
	<link href="css/custom.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="wrapper">
</div>
<!-- 选择布局浮层 开始 -->
<div class="qam_popup qam_popup_select_layout" style="width:527px;left:10px;top:10px;">
	<div class="qam_popup_inner">
		<div class="qam_popup_hd">
			<div class="qam_popup_hd_inner">
				<h3>布局</h3>
				<a href="#" class="ico_x"></a>
			</div>
		</div>
		<div class="qam_popup_bd">
			<div class="select_layout_step step1">
				<strong>1.选择布局</strong> &gt; <span>2.配置布局</span> &gt; <span>3.预览</span>
			</div>
			<div class="layout_list clear">
				<ul>
					<li>
						<a href="#" title="通栏布局"><img src="css/img/01.png" alt="布局略缩图"></a> <span>通栏布局</span>
					</li>
					<li class="select">
						<a href="#" title="两栏布局，主体内容在前，左栏固定宽度，右栏自适应宽度"><img src="css/img/02.png" alt="布局略缩图"></a> <span>两栏布局（left）</span>
					</li>
					<li>
						<a href="#" title="两栏布局，主体内容在前，右栏栏固定宽度，左栏自适应宽度"><img src="css/img/03.png" alt="布局略缩图"></a> <span>两栏布局(right)</span>
					</li>
					<li>
						<a href="#" title="三栏布局，主体内容在前，左右两栏固定宽度"><img src="css/img/04.png" alt="布局略缩图"></a> <span>三栏布局</span>
					</li>
					<li>
						<a href="#" title="两栏布局，主体内容在前，左栏固定宽度，右栏自适应宽度,等高布局"><img src="css/img/02_1.png" alt="布局略缩图"></a> <span>两栏布局（left | 等高）</span>
					</li>
					<li>
						<a href="#" title="两栏布局，主体内容在前，右栏栏固定宽度，左栏自适应宽度，等高"><img src="css/img/03_1.png" alt="布局略缩图"></a> <span>两栏布局(right | 等高)</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="qam_popup_ft">
			<div class="global_tip_button">
			<a class="bt_tip_hit" title="下一步" href="#">下一步</a>
			<!--<a class="bt_tip_normal" title="取消" href="#">取消</a>-->
			<!--<span class="bt_tip_forbid">无法点击</span>-->
			</div>
		</div>
	</div>
</div>
<!-- 选择布局浮层 结束 -->
<!-- 配置布局浮层 开始 -->
<div class="qam_popup qam_popup_select_layout" style="width:527px;left:560px;top:10px;">
	<div class="qam_popup_inner">
		<div class="qam_popup_hd">
			<div class="qam_popup_hd_inner">
				<h3>布局</h3>
				<a href="#" class="ico_x"></a>
			</div>
		</div>
		<div class="qam_popup_bd">
			<div class="select_layout_step step2">
				<span>1.选择布局</span> &gt; <strong>2.配置布局</strong> &gt; <span>3.预览</span>
			</div>
			<div class="form_layout_cofig">
				<form action="">
					<div class="panel">
						<span class="panel_tit">边栏宽度：</span>
						<div class="panel_main">
							<input type="text" class="inputstyle_pop"  value="300px"/> 
						</div>
					</div>
					<div class="panel">
						<span class="panel_tit">栏目间距：</span>
						<div class="panel_main">
							<input type="text" class="inputstyle_pop"  value="10px"/>
						</div>
					</div>
					<div class="panel">
						<span class="panel_tit">边栏背景：</span>
						<div class="panel_main">
							<input type="text" class="inputstyle_pop" value="#CCD1D4" /> <span class="background" style="background-color:#CCD1D4"></span>
						</div>
					</div>
					<div class="panel">
						<span class="panel_tit">主栏背景：</span>
						<div class="panel_main">
							<input type="text" class="inputstyle_pop" value="#E3D7CB" />
							<span class="background" style="background-color:#E3D7CB"></span>
						</div>
					</div>
					<!--如果是在一个空白页面添加布局就增加header和footer选项。-->
					<fieldset class="select">
						<legend><label for=""><input type="checkbox" id="" /> header</label></legend>
						<div class="panel">
							<span class="panel_tit">header高度：</span>
							<div class="panel_main">
								<input type="text" class="inputstyle_pop" value="300px" />
							</div>
						</div>
						<div class="panel">
						<span class="panel_tit">header背景：</span>
						<div class="panel_main">
							<input type="text" class="inputstyle_pop" value="#628A67" />
							<span class="background" style="background-color:#628A67"></span>
						</div>
					</div>
					</fieldset>
					<!--当用户选中了checkbox，就增加select的类名-->
					<fieldset class="select">
						<legend><label for=""><input type="checkbox" id="" /> footer</label></legend>
						<div class="panel">
							<span class="panel_tit">footer高度：</span>
							<div class="panel_main">
								<input type="text" class="inputstyle_pop" value="300px" />
							</div>
						</div>
						<div class="panel">
						<span class="panel_tit">footer背景：</span>
						<div class="panel_main">
							<input type="text" class="inputstyle_pop" value="#CCD1D4" />
							<span class="background" style="background-color:#CCD1D4"></span>
						</div>
					</div>
					</fieldset>
				</form>
			</div>
		</div>
		<div class="qam_popup_ft">
			<div class="global_tip_button">
			<a class="bt_tip_hit" title="下一步" href="#">下一步</a>
			<!--<a class="bt_tip_normal" title="取消" href="#">取消</a>-->
			<!--<span class="bt_tip_forbid">无法点击</span>-->
			</div>
		</div>
	</div>
</div>
<!-- 配置布局浮层 结束 -->
<!-- 预览布局浮层 开始 -->
<div class="qam_popup qam_popup_select_layout" style="width:527px;left:1110px;top:10px;">
	<div class="qam_popup_inner">
		<div class="qam_popup_hd">
			<div class="qam_popup_hd_inner">
				<h3>布局</h3>
				<a href="#" class="ico_x"></a>
			</div>
		</div>
		<div class="qam_popup_bd">
			<div class="select_layout_step step3">
				<span>1.选择布局</span> &gt; <span>2.配置布局</span> &gt; <strong>3.预览</strong>
			</div>
			<div class="layout_preview">
				<img src="css/sample/layout_preview.png" alt="">
			</div>
		</div>
		<div class="qam_popup_ft">
			<div class="global_tip_button">
			<a class="bt_tip_hit" title="生成布局" href="#">生成布局</a>
			<!--<a class="bt_tip_normal" title="取消" href="#">取消</a>-->
			<!--<span class="bt_tip_forbid">无法点击</span>-->
			</div>
		</div>
	</div>
</div>
<!-- 预览布局浮层 结束 -->
</body>
</html>